<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/common/css/hm-ui.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <style>
        .box {
            height: 500px;
            /*width: 200px;*/
            /*border: 1px solid black;*/
            overflow: auto;
            border-top: 0;
            box-shadow: none;

        }

        .content {
            height: 550px;
            /*width: 150px;*/
            /*border: 1px solid red;*/
        }

        .expand-control {
            font-size: 12px;
            color: #1682e6;
            cursor: pointer;
        }
    </style>
</head>


<body style="background-color: white">
<div class="main-content" style="margin: 0;padding: 0">
    <form id="form-user-add" class="form-horizontal" style="background-color: white">
        <div class="content">
        </div>

        <!--     分页按钮 -->


    </form>
    <!-- loading -->
    <div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         data-backdrop='static' style="display: flex;align-items: center;justify-content: space-around;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    请稍候...<span id="result"></span>
                </div>
            </div>
        </div>
    </div>

</div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/jquery-jqPaginator/jqPaginator.js}"></script>

<script>
    $(function () {
        //获取页面传过来的参数
        var url = decodeURI(location.search); //?id="123456"&Name="bicycle";
        var object = {};
        if (url.indexOf("?") != -1)//url中存在问号，也就说有参数。
        {
            var str = url.substr(1);  //得到?后面的字符串
            var strs = str.split("&");  //将得到的参数分隔成数组[id="123456",Name="bicycle"];
            for (var i = 0; i < strs.length; i++) {
                object[strs[i].split("=")[0]] = strs[i].split("=")[1]
            }
        }

        // console.log(object);

        $.ajax({
            url: "/system/lookup/telaccSubjectJson",
            data: {accSubject: object.accSubject},
            type: "POST",
            dataType: "json",
            beforeSend: function () {
                $('#loading').modal('show');
            },
            complete: function () {
                $('#loading').modal('hide');
            },
            success: function (data) {
                // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
                console.log(data);
                var contentObj = document.getElementsByClassName("content")[0];


                if (data.rows.length == 0) {
                    contentObj.innerHTML = '没有数据';
                } else {
                    var isHtml = "";
                    var arr = data.rows;

                    for (var i = 0; i < data.rows.length; i++) {
                        let wkFmNo = arr[i].workFormNo == null ? '暂无' : arr[i].workFormNo;
                        // console.log(arr[i])
                        isHtml += '<div class="col-sm-12 work-box" onclick="telDetail(' + arr[i].pkId + ',' + arr[i].getDealPk + ')">';
                        isHtml += '<div class="work-box-top">';
                        isHtml += '<div class="col-sm-12 work-box-top-box">';
                        isHtml += '<div class="col-sm-10"><a class="work-box-a" onclick="telDetail(' + arr[i].pkId + ',' + arr[i].getDealPk + ')"><span>' + arr[i].wsTopic + '</span></a></div>';
                        isHtml += '<div class="col-sm-2">';
                        // isHtml += '<i class="fa fa-chevron-circle-right"></i>';
                        isHtml += '</div>';
                        isHtml += '</div>';
                        isHtml += '<div class="col-sm-12 work-box-top-class">'
                        isHtml += '<div class="col-sm-6"><a style="color: inherit">流水号：' + arr[i].wsCode + '</a></div>'
                        isHtml += '<div class="col-sm-6"><a style="color: inherit">工单编号：' + wkFmNo + '</a></div>'
                        isHtml += '</div>'
                        isHtml += '<div class="col-sm-12 work-box-class" onclick="telDetail(' + arr[i].pkId + ',' + arr[i].getDealPk + ')">';
                        isHtml += '<a style="color: inherit">' + arr[i].fmContent + '</a>'
                        isHtml += '</div>'
                        isHtml += '<div class="col-sm-12 work-box-buttom">';
                        isHtml += '<div class="col-sm-6">' + arr[i].iptTime + '</div>';
                        isHtml += '<div class="col-sm-4">';
                        isHtml += '<div class="col-sm-12 entering-pd">处理情况：' + arr[i].crtStepName + '</div>';
                        isHtml += '</div>';
                        isHtml += '</div>';
                        isHtml += '</div>';
                        isHtml += '</div>';
                    }
                    ;
                    // 一页有多少条数据
                    var size = 5;
                    // 当前页码
                    var curPage = 1;
                    // 总共有多少页
                    var totalPage = Math.floor((data.total / size) + 1);
                    // 是否有下一页
                    var hasNext = curPage != totalPage;
                    if (hasNext) {
                        isHtml += '<div id="txtMore' + curPage + '" style="text-align: center" onclick="more(' + totalPage + ',' + size + ',' + (curPage + 1) + ')"><a>更多</a></div>'
                    } else {
                        isHtml += '<div style="text-align: center">没有更多了......</div>'
                    }
                    contentObj.innerHTML = isHtml;
                }

            }

        });

        more = function (totalPage, size, curPage) {
            $('#txtMore' + (curPage - 1)).fadeOut('fast', function () {
                $.ajax({
                    url: "/system/lookup/telaccSubjectJson",
                    data: {pageSize: size, pageNum: curPage, accSubject: object.accSubject},
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化

                        var contentObj = document.getElementsByClassName("content")[0];
                        var isHtml = contentObj.innerHTML;
                        var arr = data.rows;
                        var hasNext = totalPage != curPage;

                        for (var i = 0; i < data.rows.length; i++) {
                            console.log(data.rows[i]);
                            let wkFmNo = arr[i].workFormNo == null ? '暂无' : arr[i].workFormNo;
                            // console.log(arr[i])
                            isHtml += '<div class="col-sm-12 work-box"  onclick="telDetail(' + arr[i].pkId + ',' + arr[i].getDealPk + ')">';
                            isHtml += '<div class="work-box-top">';
                            isHtml += '<div class="col-sm-12 work-box-top-box">';
                            isHtml += '<div class="col-sm-10"><a class="work-box-a" onclick="telDetail(' + arr[i].pkId + ',' + arr[i].getDealPk + ')"><span>' + arr[i].wsTopic + '</span></a></div>';
                            isHtml += '</div>';
                            isHtml += '<div class="col-sm-12 work-box-top-class">'
                            isHtml += '<div class="col-sm-6"><a style="color: inherit">流水号：' + arr[i].wsCode + '</a></div>'
                            isHtml += '<div class="col-sm-6"><a style="color: inherit">工单编号：' + wkFmNo + '</a></div>'
                            isHtml += '</div>'
                            isHtml += '<div class="col-sm-12 work-box-class" onclick="telDetail(' + arr[i].pkId + ',' + arr[i].getDealPk + ')">';
                            isHtml += '<a style="color: inherit">' + arr[i].fmContent + '</a>'
                            isHtml += '</div>'
                            isHtml += '<div class="col-sm-12 work-box-buttom">';
                            isHtml += '<div class="col-sm-6">' + arr[i].iptTime + '</div>';
                            isHtml += '<div class="col-sm-4">';
                            isHtml += '<div class="col-sm-12 entering-pd">处理情况：' + arr[i].crtStepName + '</div>';
                            isHtml += '</div>';
                            isHtml += '</div>';
                            isHtml += '</div>';
                            isHtml += '</div>';
                        }
                        ;
                        if (hasNext) {
                            isHtml += '<div id="txtMore' + curPage + '" style="text-align: center" onclick="more(' + totalPage + ',' + size + ',' + (curPage + 1) + ')"><a>更多</a></div>'
                        } else {
                            isHtml += '<div style="text-align: center">没有更多了......</div>'
                        }
                        contentObj.innerHTML = isHtml;

                    }

                });
            });
        }


    });

    function telDetail(wfid, tid) {
        var url = '';
        var title = '';
        var width = '85%';
        var height = '80%';

        if (wfid == -1) {
            url = '/system/lookup/telGetDetail/' + tid;
            title = '通话记录详情';
        } else {
            url = '/system/test/caseDetail/' + wfid;
            title = '通话工单详情';
        }
        var options = {
            url: url,
            title: title,
            width: width,
            height: height,
            skin: 'layui-layer-gray',
            btn: ['关闭'],
            yes: function (index, layero) {
                $.modal.close(index);
            }
        }
        $.modal.openOptions(options);
    }

</script>
</body>
</html>

